<style lang='scss'>
	.edit-record-dialog {
		.record-form {
			width: 100%;
			td {
				padding-bottom: 12px;
				.el-date-editor {
					width: 100%;
				}
				&.space-td {
					width: 8%;
				}
				&.label {
					max-width: 100px;
			    text-overflow: ellipsis;
			    overflow: hidden;
			    white-space: nowrap;
			    &.hidden {
			    	opacity: 0.6;
			    }
				}
			}
		}
		.dialog-footer {
			display: flex;
    	align-items: center;
    	.remark-text {
    		text-align: left;
    		flex-grow: 1;
    	}
		}
	}
</style>
<template>
	<el-dialog
	  title="修改记录"
	  class="edit-record-dialog edit-dialog"
	  :visible.sync="dialog_visible"
	  @closed="dialogClosedHandle"
	  width="40%">
	  <table class="form-table record-form card-form">
			<tbody>
				<tr>
					<td class="label"><span>工号</span></td>
					<td><cusInput maxlength=8 :v_input.sync="id_num" :disabled="true"></cusInput></td>
					<td class="space-td"></td>
					<td class="label">日期</td>
					<td>
						<el-date-picker
				      v-model="record_date"
				      type="date"
				      value-format="timestamp"
				      placeholder="选择日期">
				    </el-date-picker>
				  </td>
				</tr>
				<tr><td colspan="5"></td></tr>
				<template v-for="(item, index) in record_keys" >
  				<tr v-if="index % 2== 0">
  					<td class="label" :class="item.status==2?'hidden':''">{{item.label}}</td>
  					<td><cusInput :v_input.sync="form_data[item.idKey]"></cusInput></td>
  					<td class="space-td"></td>
  					<template v-if="record_keys[index+1]">
  						<td class="label" :class="record_keys[index+1].status==2?'hidden':''">{{record_keys[index+1].label}}</td>
  						<td><cusInput maxlength=8 :v_input.sync="form_data[record_keys[index+1].idKey]"></cusInput></td>
  					</template>
  				</tr>
  			</template>
			</tbody>
		</table>
  	<span slot="footer" class="dialog-footer">
  		<p class="remark-text" style="margin-left: 4px;"><i class="el-icon-warning"></i>灰色为隐藏项</p>
	    <el-button @click="dialog_visible = false">取 消</el-button>
	    <el-button type="primary" @click="submitEdit" :loading="btn_loading">确 定</el-button>
	  </span>
  </el-dialog>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	export default {
		props: {
			record_keys: {
				default: []
			},
		},
		data() {
			return {
				dialog_visible: false,
				btn_loading: false,
				id: '',
				id_num: '',
				record_date: '',
				form_data: {

				},
				data_bak: {}
			}
		},
		methods: {
			show(record) {
				this.dialog_visible = true;
				this.initForm(record);
			},
			initForm(record={}) {
				this.id = record.id || '';;
				this.id_num = record.userIdNum || '';;
				this.form_data = record.salaryData || {};
				this.record_date = new Date(record.salaryDate).getTime() || '';
				this.data_bak = Object.assign({record_date: this.record_date}, this.form_data);
			},
			submitEdit() {
				//check form
				if(!this.id) {
					this.$message.error("该记录不存在，请刷新后重试");
					return;
				}
				let form_edited = false, has_empty = false, this_data_bak = this.data_bak, this_form_data = this.form_data, send_data = {};
				for(let item in this_form_data) {
					if(this_form_data[item] == '') {
						has_empty = true;
					}
					if(this_data_bak[item] != this_form_data[item]) {
						form_edited = true;
					}
				}

				if(this.record_date != this_data_bak.record_date) send_data.date = this.record_date;

				if(!this.record_date || has_empty) {
					this.$message.error("所有项都是必填项");
					return;
				}
				if(!send_data.date && !form_edited) {
					this.$message.error("请修改后提交");
					return;
				}
				//

				this.btn_loading = true;
				if(form_edited) {
					send_data.salary_data = JSON.stringify(this_form_data);
				}
				send_data.id = this.id;
				this.$axios.post('/admin/editRecordSingle', send_data).then(res => {
					if(res.s == 1) {
						this.$message.success("修改成功");
						this.dialog_visible = false;
						this.$emit("reloadTb");
					}
				}).finally(() => {
					this.btn_loading = false;
				})
			},
			dialogClosedHandle() {
				this.initForm();
			}
		},
		components: {
			cusInput
		}
	}
</script>